<template>
  <div class="common-body-wrapper">
    <div class="configBox">
      <p>换肤推荐</p>
      <!-- <div class="btnGroup">
        <button class="ake_btn ake_btn_text" @click="changeSkinEvent()">确认</button>
        <button class="ake_btn ake_btn_text modal-close">取消</button>
      </div> -->
    </div>
    <div class="stylesBox">
      <div class="item">
        <p class="name">蓝色风格
          <span v-if="skinType==0" style="font-size: 12px;color: #15B6A8;">(使用中)</span>
        </p>
        <div class="demoImgBox" @click="changeSkinEvent(0)">
          <img class="demoImg" src="../../assets/img/Bitmap.png" alt="">
          <img v-if="skinType==0" class="seleteImg" src="../../assets/img/ic_select.png" alt="">
        </div>
      </div>
      <div class="item">
        <p class="name">绿色风格
          <span v-if="skinType==1" style="font-size: 12px;color: #15B6A8;">(使用中)</span>
        </p>
        <div class="demoImgBox" @click="changeSkinEvent(1)">
          <img class="demoImg" src="../../assets/img/green.png" alt="">
          <img v-if="skinType==1" class="seleteImg" src="../../assets/img/ic_select.png" alt="">
        </div>
      </div>
      <div class="item">
        <p class="name">草绿色风格
          <span v-if="skinType==2" style="font-size: 12px;color: #15B6A8;">(使用中)</span>
        </p>
        <div class="demoImgBox">
          <img class="demoImg" src="../../assets/img/green2.png" alt="">
          <img v-if="skinType==2" class="seleteImg" src="../../assets/img/ic_select.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引进commonjs
import common from "@mixins/common.js";

// 引进vue的js
import skin_config from "./js/skin_config.js";

export default {
  mixins: [common, skin_config],
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.common-body-wrapper {
  margin: 0 36px;
  font-size: 16px;
  color: #0c0c0c;
}
.configBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  border-bottom: 1px #eee solid;
  margin-bottom: 16px;
}
.stylesBox {
  display: flex;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #192133;
    &:not(:last-child) {
      margin-right: 20px;
    }
    .name {
      margin: 5px;
    }
    .demoImgBox {
      position: relative;
      width: 100%;
      .demoImg {
        width: 100%;
      }
      .seleteImg {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 45px;
        height: 45px;
      }
    }
  }
}
</style>